<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <title>Zffc后台管理主页</title>

    <meta name="keywords" content="">
    <meta name="description" content="">

    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" >
    <![endif]-->

    <!-- 一般把jquery.js 放在最前面，防止其他.js文件用到jquery.js 却无法识别到.js   -->
    <script th:src="@{/js/common/jquery.min.js}"></script>
    <link th:href="@{/css/common/bootstrap.min.css}" th:rel="stylesheet">
    <link th:href="@{/css/common/font-awesome.min.css}" th:rel="stylesheet">
    <link th:href="@{/css/common/animate.css}" th:rel="stylesheet">
    <link th:href="@{/css/common/style.css}" th:rel="stylesheet">
    <link th:href="@{/css/plugins/tab/tabStyle.css}" th:rel="stylesheet">
    <link th:href="@{/css/plugins/tab/style.css}" th:rel="stylesheet">

    <script th:src="@{/js/plugins/tab/tab.js}"></script>


</head>

<body class="fixed-sidebar full-height-layout gray-bg" style="overflow:hidden">
    <div id="wrapper">
        <!--左侧导航开始-->
        <nav class="navbar navbar-default navbar-static-side" role="navigation" style="background-color: #f9f9f9;">
            <div class="nav-close"><i class="fa fa-times-circle"></i>
            </div>
<!--         style="background: #f6f6f6;"   -->
            <div class="sidebar-collapse" >
                <ul class="nav" id="side-menu">
                    <!--background-color: #1890ff;使顶部变成蓝色-->
                    <li class="nav-header" style="background-color: #1890ff;height: 60px;">
                        <div class="dropdown profile-element">
                            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <span class="clear">
                                    <!--左侧导航栏顶部文字位置和大小-->
                                    <span class="block m-t-xs" style="font-size: 22px;margin-top: 9px;">
                                        <i class="fa fa-github-alt"></i>
                                        <strong class="font-bold">ZffcBoot后台</strong>
                                    </span>
                                </span>
                            </a>
                        </div>
                        <div class="logo-element">后台</div>
                    </li>

                    <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
                        <span class="ng-scope">功能栏</span>
                    </li>
                    <li>
                        <a  id = "index" class="J_menuItem"  th:href="@{/welcome.html}">
                            <i class="fa fa-home" ></i>
                            <span class="nav-label">主页</span>
                        </a>
                    </li>
                    <!--分割线-->
                    <li class="line dk"></li>

                </ul>
            </div>
        </nav>
        <!--左侧导航结束-->
        <!--右侧部分开始-->
        <div id="page-wrapper" class="gray-bg dashbard-1">
            <div class="row border-bottom">
                <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0;background-color: #1890ff;">
                    <!--右侧顶部导航栏-->
                    <div class="navbar-header"><a class="navbar-minimalize minimalize-styl-2 btn btn-info " style="color: #ffffff !important;
                     background-color: #1890ff; border-color: #1890ff;font-size: 23px;" href="#"><i class="fa fa-bars"></i> </a>
                        <div style="height: 60px;">
                        <strong style="margin-left: 5px;font-size: 15px;color: #fff;line-height: 66px">欢迎进入Zffc后台管理系统 </strong>
                        </div>
                    </div>
                    <ul class="nav navbar-top-links navbar-right">
                        <li><i  style="color: #d4e2e6" class="fa fa-search-plus" onclick="searchMenu()"></i>&nbsp; &nbsp;
                        <input id="menu" type="text" placeholder="搜索菜单" style="background-color: #e3f1ff; border-top: #1890ff;
                                                               border-right: #1890ff;border-left: #1890ff;color: black;border-bottom: black;"/>
                        </li>
                        <!--class="dropdown" 这个类名是下拉菜单-->
                        <li class="dropdown">
                            <!--下拉菜单名称(可带有图片)-->
                            <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#" style="margin-top:6px;color: #FFF">
                                <img  id="avaotr" style="height: 30px;width: 30px;border-radius: 100%">
                                <span class="label label-primary"></span><span id="username"></span>
                            </a>
                            <!--下拉菜单选项-->
                            <ul class="dropdown-menu dropdown-alerts">
                                <li>
                                    <a class="J_menuItem" href="/admin/toDetail">
                                        <div>
                                            <i class="fa fa-user"></i>
                                            &nbsp;个人中心
                                        </div>
                                    </a>
                                    <a  onclick="editPwd()">
                                        <div>
                                            <i class="fa fa-unlock-alt"></i>
                                            &nbsp;密码修改
                                        </div>
                                    </a>
                                </li>
                                <!--也是分割线-->
                                <li role="presentation" class="divider"></li>
                                <li>
                                    <a  onclick="exit()">
                                        <div>
                                            <i class="fa fa-remove"></i>
                                            &nbsp;注销
                                            <span class="pull-right text-muted small">admin</span>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>


                <!--菜单HTML Start-->
                <div id="page-tab">
                    <button class="tab-btn" id="page-prev"></button>
                    <nav id="page-tab-content">
                        <div id="menu-list">                </div>
                    </nav>
                    <button class="tab-btn" id="page-next"></button>
                    <div id="page-operation">
                        <div id="menu-all">
                            <ul id="menu-all-ul">
                            </ul>
                        </div>
                    </div>
                </div>
                <!--菜单HTML End-->
                <!--iframe Start (根据页面顶部占用高度，自行调整高度数值)-->
                <div id="page-content" style="height: calc(100%);">        </div>
                <!--iframe End-->
        </div>
        <!--右侧部分结束-->
    </div>

    <script th:inline="javascript">
        // var admin = [[${admin}]];
        // $("#avaotr").attr("src",admin.avaotr);
        // $("#username").text(admin.realname);
        var menuList = [[${menuList}]];
        for(var index in menuList){
            var li = $("<li>");
            //一级菜单
            var a = $("<a>");
            a.attr("href","#");
            var i = $("<i>");
            i.attr("class","fa fa fa-cog");
            var span = $("<span>");
            span.attr("class","nav-label");
            span.text(menuList[index].name);
            var span1 = $("<span>");
            span1.attr("class","fa arrow");
            a.append(i);
            a.append(span);
            a.append(span1);
            li.append(a);
            //二级菜单
            var ul = $("<ul>");
            ul.attr("class","nav nav-second-level");
            for(var order in menuList[index].child){
               var menu = menuList[index].child[order]
               var li1 = $("<li>");
               var  a1 = $("<a>");
               a1.attr("class","J_menuItem");
               a1.attr("href",menu.url);
               a1.text(menu.name);
               li1.append(a1);
               ul.append(li1);
            }
            li.append(ul);
            $("#side-menu").append(li);
        }
    </script>

    <script>
        //这个一定要放在后面，因为上面在动态展示页面
        //初始化a标签链接到tab
        $(".J_menuItem").tab();
    </script>

    <!-- 全局js -->
    <script th:src="@{/js/common/bootstrap.min.js}"></script>
    <script th:src="@{/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
    <script th:src="@{/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>
    <script th:src="@{/js/plugins/layer/layer.min.js}"></script>
    <!-- 自定义js -->
    <script th:src="@{/js/index/hAdmin.js}"></script>
    <script type="text/javascript">
        $(function (){
           $("#index").click();
        });

        function searchMenu(){
            var text = $("#menu").val();
            var menus = $("a.J_menuItem");
            var menu = null;
            for(var i = 0; i<menus.length; i++){
                //如果menus是个数组，那么这时候的数组里都是dom对象而非jquery对象
                if( $.trim($(menus[i]).text()).search($.trim(text)) != -1) {
                    menu = menus[i];
                    break;
                }
            }
            console.log("menu: "+menu);
            if(menu != null){
                $(menu).click();
            }

        }

        function editPwd() {
            layer.open({
                type: 2,
                title: '密码修改',
                shadeClose: true,
                shade: false,
                area: ['800px', '415px'],
                content: '/admin/toEditPassword'
            });
        }

        function exit(){
            layer.confirm('真的要注销登录吗 ?', {icon: 3, title: '提示'}, function (index) {
                $.ajax({
                    type: "GET",
                    dataType: "json",
                    url: "/admin/logout",
                    success: function (res) {
                        if (res.message == "ok") {
                            window.parent.location.href = "/adminLogin.html";
                        }
                    }
                });
            });
        }
    </script>
</body>

</html>
